<template>
    <div>
      <el-card class="top">
      <el-form :inline="true">
        <el-form-item label="一级分类">
          <el-select style="width: 120px;" v-model="categoryStore.c1Id" @change="handler" :disabled="scene == 0 ? false : true">
            <el-option v-for="item in categoryStore.firstClass" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" >
          <el-select style="width: 120px;" v-model="categoryStore.c2Id" @change="handler2" :disabled="scene == 0 ? false : true">
            <el-option v-for="item in categoryStore.secondClass" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select style="width: 120px;" v-model="categoryStore.c3Id" @change="handler3" :disabled="scene == 0 ? false : true">
            <el-option v-for="item in categoryStore.thirdClass" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import useCategoryStore from '../../stores/modules/category';
import { onMounted } from 'vue';

defineProps(['scene'])

let categoryStore = useCategoryStore()

let firstClass = ref<any>([])
console.log("组件联级器的第一梯队",firstClass.value)

onMounted(() => {
  //获取一级分类的数据
  getC1()
})

const getC1 = async () => {
  //let result = await reqC1();
  //console.log(result)
  categoryStore.getC1()
}

const handler = () => {
  //需要将二、三级数据清空
  categoryStore.c2Id = '',
  categoryStore.secondClass = [],
  categoryStore.c3Id ='',
  categoryStore.thirdClass = [],
  //通知仓库获取二级分类的数据
  categoryStore.getC2(categoryStore.c1Id)
}

const handler2 = () => {
  //需要将二、三级数据清空
  categoryStore.getC3(categoryStore.c2Id)
}

const handler3 = () => {
  categoryStore.getTable(categoryStore.c1Id, categoryStore.c2Id, categoryStore.c3Id)
}
</script>

<style scoped>

</style>